<template>
  <page-layout>
    <a-card>
      <a-button @click="$router.go(-1)">返回</a-button>
      <a-form
        style="margin-top: 36px"
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="调研原因" required>
          <a-input
            placeholder="请输入调研原因"
            size="large"
            v-decorator="[
              'reason',
              {
                rules: [{ required: true, message: '请输入调研原因!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="调研开始时间" :required="true">
          <a-date-picker
            size="large"
            placeholder="请选择调研开始时间"
            v-decorator="[
              'began_at',
              {
                rules: [
                  {
                    type: 'object',
                    required: true,
                    message: '请选择调研开始时间!'
                  }
                ]
              }
            ]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="调研结束时间" :required="true">
          <a-date-picker
            size="large"
            placeholder="请选择调研结束时间"
            v-decorator="[
              'finished_at',
              {
                rules: [
                  {
                    type: 'object',
                    required: true,
                    message: '请选择调研结束时间!'
                  }
                ]
              }
            ]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="调研结果">
          <a-input
            placeholder="请选择调研结果"
            size="large"
            v-decorator="['result']"
            @change="handleSelectChange"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="调研结果说明">
          <EditorBar
            v-decorator="[
              'result_explain',
              {
                rules: [{ required: true, message: '请选择负责人!' }]
              }
            ]"
            :isClear="isClear"
          />
        </a-form-item>
        <a-form-item label="附件">
          <a-upload-dragger
            v-decorator="[
              'files',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="file"
            :multiple="false"
            action="/commons/qiniu_uploadFile"
            @change="handleChange"
            :beforeUpload="beforeUpload"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" style="color: #dddddd" />
            </p>
            <!-- <p class="ant-upload-text">点击或者拖拽文件来上传你的附件</p> -->
            <p class="ant-upload-hint" style="color: #ccc">
              点击或者拖拽文件来上传附件
            </p>
          </a-upload-dragger>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
          <a-button type="primary" size="large" @click="handleSubmit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-layout>
</template>

<script>
import { surveyAdd, surveyDetail, surveyEdit } from "@/services/demand";
import PageLayout from "@/layouts/PageLayout";
import EditorBar from "@/components/wangEditor";
import moment from "moment";
export default {
  name: "demand",
  components: {PageLayout, EditorBar },
  data() {
    this.form = this.$form.createForm(this);
    return {
      isClear: false,
      detail: "",
      selectDatas: [],
      editData: {}
    };
  },
  created() {
    // 如果时编辑过来
    if (this.$route.query.is_surveys !== 0) {
      surveyDetail(this.$route.query.id).then((editData) => {
        if (editData.data.code !== 20000)
          return this.$message.error("出错了，请刷新页面重试");
        editData = editData.data.data;
        console.log(editData, "editData");
        for (var key in editData) {
          if (key === "id") {
            editData["survey_id"] = editData[key];
            delete editData[key];
          }
          if (key === "began_at" || key === "finished_at") {
            // console.log(moment(editData[key]), "moment(editData[key])");
            this.form.setFieldsValue({
              [key]: editData[key] ? moment(editData[key]) : ""
            });
            continue;
          }
          this.form.setFieldsValue({ [key]: editData[key] });
        }
        this.editData = editData;
        console.log(this.editData);
      });
    }
  },

  computed: {},
  methods: {
    moment,
    // 文本编辑器内容改变时的回调函数被
    change(val) {
      console.log(val, 111);
      console.log(this.detail, 111);
    },
    handleSelectChange() {},
    handleSubmit() {
      this.form.validateFields((err, values) => {
        console.log(err, values);
        if (!err) {
          // console.log({ ...values, requirement_id: this.$route.query.id });
          // 如果未添加
          if (this.$route.query.is_surveys == 0) {
            surveyAdd({ ...values, requirement_id: this.$route.query.id }).then(
              (res) => {
                // console.log(res, res);
                if (res.data.code === 20000) {
                  this.$message.success({
                    content: res.data.message || "提交成功~",
                    onClose: () => {
                      this.form.resetFields();
                      this.$router.go(-1);
                    }
                  });
                } else {
                  this.$message.success(
                    res.data.message || "提交异常，请重试~"
                  );
                }
              }
            );
          } else {
            // 如果添加过，就是编辑
            surveyEdit({ ...this.editData, ...values }).then((res) => {
              // console.log(res, res);
              if (res.data.code === 20000) {
                this.$message.success({
                  content: res.data.message || "修改成功~",
                  onClose: () => {
                    this.form.resetFields();
                    this.$router.go(-1);
                  }
                });
              } else {
                this.$message.success(res.data.message || "提交异常，请重试~");
              }
            });
          }
        }
      });
    },
    // 上传的文件变化时
    handleChange(info) {
      const status = info.file.status;
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        // 服务端返回状态码不为 20000 时
        if (info.file.response.code !== 20000) {
          this.$message.error(info.file.response.message);
          this.form.setFieldsValue({ files: info.fileList.splice(-1, 1) });
          return false;
        }
        this.$message.success(`${info.file.name} 上传成功~`);
      } else if (status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    // 文件上传之前
    // eslint-disable-next-line no-unused-vars
    beforeUpload(file, fileList) {
      // if (this.form.getFieldValue("files").length > 1) {
      //   this.$message.warn("只能上传一个附件哦~");
      //   this.form.setFieldsValue({ files: fileList.splice(-1, 1) });
      //   return false;
      // }
    },
    normFile(e) {
      console.log("Upload event:", e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
